<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>数据绑定</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>Hello {{ name }}</h1>
            <hr>
            事件的基本使用
            <p>1. 使用v-on:xxx或@xxx绑定事件，其中xxx是事件名；</p>
            <p>2. 事件的回调需要配置在methods对象中，最终会在vm上；</p>
            <p>3. methods中配置的函数，不要用箭头函数！否则this就不是vm了；</p>
            <p>4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;</p>
            <p>5. @click="demo"和@click="demo($evnet)"效果一致，但后者可以传参。</p>
            <!-- 原生写法 -->
            <!-- <button v-on:click="showInfo1">点我</button> -->
            <!-- 简写 -->
            <button @click="showInfo1">点我1(不传参)</button>
            <button @click="showInfo2($event, 123)">点我2（传参）</button>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false    // 阻止Vue在启动时生成生产提示

            // 创建Vue实例，开端
            new Vue({
                el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
                data: {     // data中用于存储数据，数据供el指定的容器去使用
                    name: "任亭松"
                },
                methods: {
                    showInfo1(event) {
                        console.log(event.target.innerText)
                        console.log(this)   // 此处的this是vm
                        alert('同学你好1')
                    },
                    showInfo2(event, number) {
                        console.log(event.target.innerText, number)
                        console.log(this)   // 此处的this是vm
                        alert('同学你好11')
                    }
                }
            })
        </script>
    </body>
</html>
